<template>
  <ych-modal
    :fullscreen="false"
    :title="title"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :cancelText="$t('m.common.button.close')">
    <a-card size="small">
      {{$t('m.bpm.design.select_user_selected')}}：{{selectedValue}}
    </a-card>
    <a-tabs>
      <a-tab-pane :tab="$t('m.bpm.design.select_user_tab_name_user')" key="1">
        <a-row>
          <a-col :span="6">
            <select-user-tree-left v-model="currentDeptId"/>
          </a-col>
          <a-col :span="12">
            <select-user-tree-right v-model="userList" :currentDeptId="currentDeptId"/>
          </a-col>
          <a-col :span="6">
            <selected-area v-model="userList"/>
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane :tab="$t('m.bpm.design.select_user_tab_name_dept')" key="2">
        <a-col :span="selectedDeptId ? 6 : 12">
          <select-dept-tree v-model="deptList" @setSelectedDept="setSelectedDept"/>
        </a-col>
        <a-col :span="12" v-show="selectedDeptId">
          <select-relation-position v-model="deptList"
                                    :currentRelationId="selectedDeptId"
                                    :currentRelationName="selectedDeptName"></select-relation-position>
        </a-col>
        <a-col :span="selectedDeptId ? 6 : 12">
          <selected-area v-model="deptList"/>
        </a-col>
      </a-tab-pane>
      <a-tab-pane :tab="$t('m.bpm.design.select_user_tab_name_role')" key="3">
        <a-row>
          <a-col :span="12">
            <select-role-list v-model="roleList"/>
          </a-col>
          <a-col :span="12">
            <selected-area v-model="roleList"/>
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane :tab="$t('m.bpm.design.select_user_tab_name_position')" key="4">
        <a-row>
          <a-col :span="12">
            <select-position-list v-model="positionList"/>
          </a-col>
          <a-col :span="12">
            <selected-area v-model="positionList"/>
          </a-col>
        </a-row>
      </a-tab-pane>
      <a-tab-pane :tab="$t('m.bpm.design.select_user_tab_name_relation')" key="5">
        <a-row>
          <a-col :span="currentRelationId ? 6 : 12">
            <select-relation-tree v-model="relationList"
                                  @setCurrentRelation="setCurrentRelation"></select-relation-tree>
          </a-col>
          <a-col :span="12" v-show="currentRelationId
          && currentRelationId!='currentUserOrgRole'
          && currentRelationId!='currentUserSameLevelOrgRole'
          && currentRelationId!='currentUserTopOneOrgRole'
          && currentRelationId!='currentUserTopTwoOrgRole'
          && currentRelationId!='currentUserDeptRole'">
            <select-relation-position v-model="relationList"
                                      :currentRelationId="currentRelationId"
                                      :currentRelationName="currentRelationName"></select-relation-position>
          </a-col>
          <a-col :span="12" v-show="currentRelationId
          && (currentRelationId=='currentUserOrgRole'
          || currentRelationId=='currentUserSameLevelOrgRole'
          || currentRelationId=='currentUserTopOneOrgRole'
          || currentRelationId=='currentUserTopTwoOrgRole'
          || currentRelationId=='currentUserDeptRole' )">
            <select-relation-role v-model="relationList"
                                      :currentRelationId="currentRelationId"
                                      :currentRelationName="currentRelationName"></select-relation-role>
          </a-col>
          <a-col :span="currentRelationId ? 6 : 12">
            <selected-area v-model="relationList"/>
          </a-col>
        </a-row>
      </a-tab-pane>
    </a-tabs>
  </ych-modal>
</template>

<script>

  import SelectUserTreeLeft from './SelectUserTreeLeft'
  import SelectUserTreeRight from './SelectUserTreeRight'
  import SelectDeptTree from './SelectDeptTree'
  import SelectRoleList from './SelectRoleList'
  import SelectPositionList from './SelectPositionList'
  import SelectedArea from './SelectedArea'
  import SelectRelationTree from './SelectRelationTree'
  import SelectRelationPosition from './SelectRelationPosition'
  import SelectRelationRole from './SelectRelationRole'

  export default {
    name: 'UserSetting',
    components: {
      SelectUserTreeLeft,
      SelectUserTreeRight,
      SelectDeptTree,
      SelectRoleList,
      SelectPositionList,
      SelectedArea,
      SelectRelationTree,
      SelectRelationPosition,
      SelectRelationRole
    },
    data () {
      return {
        title: this.$t('m.bpm.design.process_select_user'),
        visible: false,
        currentDeptId: '',
        currentRelationId: null,
        currentRelationName: null,
        selectedDeptId: null,
        selectedDeptName: null,
        userList: [],
        deptList: [],
        roleList: [],
        positionList: [],
        relationList: [],
      }
    },
    computed: {
      selectedValue: function () {
        let value = ''
        if (this.userList.length > 0) {
          value += '【'+this.$t('m.bpm.design.select_user_tab_name_user')+'】'
          for (let i = 0; i < this.userList.length; i++) {
            value += this.userList[i].name + (this.userList[i].deptName ? ('/' + this.userList[i].deptName) : '') + ';'
          }
        }
        if (this.deptList.length > 0) {
          value += '【'+this.$t('m.bpm.design.select_user_tab_name_dept')+'】'
          for (let i = 0; i < this.deptList.length; i++) {
            value += this.deptList[i].name + ';'
          }
        }
        if (this.roleList.length > 0) {
          value += '【'+this.$t('m.bpm.design.select_user_tab_name_role')+'】'
          for (let i = 0; i < this.roleList.length; i++) {
            value += this.roleList[i].name + ';'
          }
        }
        if (this.positionList.length > 0) {
          value += '【'+this.$t('m.bpm.design.select_user_tab_name_position')+'】'
          for (let i = 0; i < this.positionList.length; i++) {
            value += this.positionList[i].name + ';'
          }
        }
        if (this.relationList.length > 0) {
          value += '【'+this.$t('m.bpm.design.select_user_tab_name_relation')+'】'
          for (let i = 0; i < this.relationList.length; i++) {
            value += this.relationList[i].name + ';'
          }
        }
        return value
      }
    },
    methods: {
      setCurrentRelation (currentRelationId, currentRelationName) {
        this.currentRelationId = currentRelationId
        this.currentRelationName = currentRelationName
      },
      setSelectedDept (selectedDeptId, selectedDeptName) {
        this.selectedDeptId = selectedDeptId
        this.selectedDeptName = selectedDeptName
      },
      open (json) {
        this.clearData()
        if (json) {
          json.forEach(item => {
            if (item.type == 'user') {
              this.userList = item.actorList
            } else if (item.type == 'dept') {
              this.deptList = item.actorList
            } else if (item.type == 'role') {
              this.roleList = item.actorList
            } else if (item.type == 'position') {
              this.positionList = item.actorList
            } else if (item.type == 'relation') {
              this.relationList = item.actorList
            }
          })
        }
        this.visible = true
      },
      clearData () {
        this.userList = []
        this.deptList = []
        this.roleList = []
        this.positionList = []
        this.relationList = []
        this.currentRelationId = null
        this.currentRelationName = null
        this.selectedDeptId = null
        this.selectedDeptName = null
      },
      handleOk () {
        let selectedActors = this.getReturnData()
        this.$emit('selectFinished', this.selectedValue, selectedActors)
        this.handleCancel()
      },
      handleCancel () {
        this.visible = false
      },
      getActor (type, actorList) {
        let actor = {}
        actor.type = type
        actor.actorList = actorList
        return actor
      },
      getReturnData () {
        let returnData = []
        if (this.userList.length > 0) {
          let actor = this.getActor('user', this.userList)
          returnData.push(actor)
        }
        if (this.deptList.length > 0) {
          let actor = this.getActor('dept', this.deptList)
          returnData.push(actor)
        }
        if (this.roleList.length > 0) {
          let actor = this.getActor('role', this.roleList)
          returnData.push(actor)
        }
        if (this.positionList.length > 0) {
          let actor = this.getActor('position', this.positionList)
          returnData.push(actor)
        }
        if (this.relationList.length > 0) {
          let actor = this.getActor('relation', this.relationList)
          returnData.push(actor)
        }
        //console.log('选人数据：' + JSON.stringify(returnData))
        return returnData
      },
    }
  }
</script>
